<template>
    <div class="zsdx-service">
        <div class="section">
            <div class="section-modules-title">我们的服务</div>

            <div class="service-animation-container">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    version="1.1"
                    class="service-circle1"
                >
                    <g
                        stroke="rgba(255,255,255,0.3)"
                        fill="rgba(0,0,0,0)"
                        stroke-width="1"
                    >
                        <circle
                            r="50%"
                            cx="50%"
                            cy="50%"
                            stroke-dasharray="4,8"
                        ></circle>
                    </g>
                </svg>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    version="1.1"
                    class="service-circle2"
                >
                    <g
                        stroke="rgba(255,255,255,0.9)"
                        fill="rgba(0,0,0,0)"
                        stroke-width="1"
                    >
                        <circle
                            r="50%"
                            cx="50%"
                            cy="50%"
                            stroke-dasharray="4,8"
                        ></circle>
                    </g>
                </svg>
                <div class="service-circle3"></div>
                <div class="service-map"></div>
                <div class="service-map-inner">
                    <div
                        v-for="(item, index) in serviceSchools"
                        :key="index"
                        class="service-map-school"
                        :class="item.className"
                        :style="{
                            backgroundImage: 'url(' + item.src + ')'
                        }"
                    ></div>
                    <div class="circle-title">掌上大学覆盖全国</div>
                </div>
            </div>

            <div class="service-desc">
                掌上大学为企业提供3000万大学生市场“可盈利”“可持续”“可复制”的销售解决方案
            </div>

            <div class="service-lists">
                <div class="service-item">
                    <div class="service-item-top">
                        <div class="service-icon"></div>
                        <div class="service-plus"></div>
                        <div class="service-numbner">1</div>
                        <div class="service-unit">所</div>
                    </div>

                    <div class="service-item-bottom">
                        <p class="service-name-white">GMV</p>
                        <p class="service-unit">1万~10万/年</p>
                    </div>
                </div>

                <div class="service-transfor-icon"></div>

                <div class="service-item">
                    <div class="service-item-top">
                        <div class="service-icon"></div>
                        <div class="service-plus"></div>
                        <div class="service-numbner">3000</div>
                        <div class="service-unit">所</div>
                    </div>

                    <div class="service-item-bottom">
                        <p class="service-name-white">GMV</p>
                        <p class="service-unit">3000万~3亿/年</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ZsdxService',
    data() {
        return {
            serviceSchools: [
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon51png.png',
                    className: 'schoolIconNormal firstIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon31.png',
                    className: 'schoolIconNormal secondIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon52.png',
                    className: 'schoolIconNormal thirdIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon32.png',
                    className: 'schoolIconNormal forthIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon36.png',
                    className: 'schoolIconNormal fifthIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon33.png',
                    className: 'schoolIconNormal sixthIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon45.png',
                    className: 'schoolIconNormal seventhIcon'
                },
                {
                    src:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/index/schoolIcon37.png',
                    className: 'schoolIconNormal eighthIcon'
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.section {
    .service-title {
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-title.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 190px;
        height: 54px;
        margin-bottom: -20px;
    }
    .service-main {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .service-animation-container {
        width: 6.62rem;
        height: 6.62rem;
        position: relative;
        flex-shrink: 0;
        margin: 0 auto;
        margin-top: 0.38rem;
        margin-bottom: 0.42rem;
        overflow: visiable;
    }
    .service-circle1 {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        animation: rotate 170s 0s linear infinite;
    }
    .service-circle2 {
        width: 88%;
        height: 88%;
        position: absolute;
        left: 6%;
        top: 6%;
        // transform: translate(-50%, -50%);
        box-sizing: border-box;
        transform-origin: 50% 50%;
        animation: rotateReverse 160s 0s linear infinite;
    }
    .service-circle3 {
        width: 80%;
        height: 80%;
        position: absolute;
        left: 10%;
        top: 10%;
        // transform: translate(-50%, -50%);
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-map-circle.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        animation: rotate 150s 0s linear infinite;
    }
    .circle-title {
        width: 2.4rem;
        height: 0.4rem;
        background: rgba(255, 255, 255, 0.37);
        border-radius: 0.2rem;
        font-size: 0.14rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        position: absolute;
        left: 50%;
        top: -0.05rem;
        transform: translateX(-50%);
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .service-map {
        width: 4.8rem;
        height: 5.65rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: 0.845rem;
        transform: translate(-50%, -50%);
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-map3.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .service-map-inner {
        width: 4.8rem;
        height: 3.96rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .service-map-school {
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        left: 0;
        top: 0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .service-right {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-left: 0.2rem;
    }
    .service-sub-title {
        width: 5.2rem;
        height: 1.1rem;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-subtitle.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 0.5rem;
    }
    .service-detail {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.32rem;
    }
    .service-detail-unit {
        width: 2.46rem;
        background: rgba(255, 255, 255, 0.07);
    }
    .service-detail-unit-top {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.56rem;
        background: rgba(255, 255, 255, 0.08);
    }
    .service-detail-top-logo {
        width: 0.5rem;
        height: 0.5rem;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-logo.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .service-detail-top-splider {
        width: 0.18rem;
        height: 0.18rem;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-unit-splid.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 0.1rem;
    }
    .service-detail-top-number-wrap {
        display: flex;
        align-items: flex-end;
        .service-detail-top-number {
            height: 0.52rem;
            font-size: 0.53rem;
            font-family: 'din alternate bold';
            color: rgba(255, 255, 255, 1);
            line-height: 0.53rem;
            margin-right: 4px;
        }
        .service-detail-top-unit {
            height: 0.18rem;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.18rem;
        }
    }

    .service-detail-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        .service-detail-bottom-title {
            padding-top: 0.24rem;
            text-align: center;
            font-size: 28px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.28rem;
        }
        .service-detail-bottom-number {
            padding-top: 0.16rem;
            text-align: center;
            font-size: 28px;
            font-weight: normal;
            color: rgba(250, 222, 47, 1);
            line-height: 0.28rem;
            padding-bottom: 0.2rem;
        }
    }
    .service-splider {
        width: 83px;
        height: 58px;
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/index/service-splid.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 24px;
    }
    .schoolIconNormal {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-shadow: 0 2px 8px 0 rgba(32, 160, 25, 0.2);
        animation: twinkle 2s 0s ease-in-out infinite;
    }
    .firstIcon {
        top: 62%;
        left: 83%;
        animation-delay: 0.3s;
    }
    .secondIcon {
        top: 60%;
        left: 68%;
        animation-delay: 0.6s;
    }
    .thirdIcon {
        top: 35%;
        left: 73%;
        animation-delay: 0.9s;
    }
    .forthIcon {
        top: 80%;
        left: 70%;
        animation-delay: 1.2s;
    }
    .fifthIcon {
        top: 75%;
        left: 80%;
        animation-delay: 0.8s;
    }
    .sixthIcon {
        top: 63%;
        left: 50%;
        animation-delay: 0s;
    }
    .seventhIcon {
        top: 44%;
        left: 80%;
        animation-delay: 1.3s;
    }
    .eighthIcon {
        top: 36%;
        left: 18%;
    }
    .ninthIcon {
        top: 35.5vh;
        left: 16vw;
    }
    .tenthIcon {
        top: 38.6vh;
        left: 31.9vw;
    }
    .service-desc {
        font-size: 0.28rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 0 0.38rem;
        padding-bottom: 0.32rem;
        line-height: 0.32rem;
    }

    .service-lists {
        display: flex;
        justify-content: center;
        align-items: center;
        .service-item {
            width: 3rem;
            .service-item-top {
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(25, 40, 99, 1);
                padding: 0.4rem 0;
                .service-icon {
                    width: 0.8rem;
                    height: 0.72rem;
                    background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/school_icon.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                }
                .service-plus {
                    width: 0.45rem;
                    height: 0.45rem;
                    margin: 0 0.1rem;
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-image: url('//cdn.zsdx.cn/zsdx-website/2020/images/index/service-unit-splid.png');
                }
                .service-numbner {
                    font-size: 0.52rem;
                    color: rgba(255, 255, 255, 1);
                }

                .service-unit {
                    font-size: 0.24rem;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    align-self: flex-end;
                    padding-bottom: 0.17rem;
                }
            }
            .service-item-bottom {
                background: rgba(18, 30, 79, 1);
                padding: 0.24rem 0;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                .service-name-white {
                    font-size: 0.28rem;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                }
                .service-unit {
                    font-size: 0.36rem;
                    font-weight: normal;
                    color: rgba(250, 222, 47, 1);
                    margin-top: 0.1rem;
                }
            }
        }
        .service-transfor-icon {
            width: 0.48rem;
            height: 0.32rem;
            margin: 0 0.26rem;
            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/school_arrow.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
    }
}
</style>
